<template>
	<view>
		<uv-popup ref="popup" mode="bottom" overlayOpacity="0.7" :closeOnClickOverlay="false" round="16px">
			<view class="pay flex-column">
				<view class="flex-row flex-items-center flex-between">
					<text class="font-18 font-weight-regular" style="color: black;">支付</text>
					<image src="/static/close.png" style="width: 24px; height: 24px;" @click="$refs.popup.close()">
					</image>
				</view>
				<view class="flex-row flex-center flex-items-end" style="margin-top: 28px;">
					<text class="pay-text_medium">{{ sumUSDT }}</text>
					<text class="pay-text" style="margin-left: 4px;">USDT</text>
					<text class="pay-text_medium" style="margin-left: 16px;">{{ payParams.SPX }}</text>
					<text class="pay-text" style="margin-left: 4px;">SPX</text>
				</view>
				<text class="font-14 font-weight-regular pay-main-color" style="margin-top: 24px;">请选择支付方式</text>
				<view class="flex-column" style="margin-top: 16px;">
					<text class="font-14 font-weight-regular pay-main-color">USDT</text>
					<pay-item style="margin-top: 12px;" :payStatus="1"></pay-item>
				</view>
				<view class="flex-column" style="margin-top: 16px;">
					<text class="font-14 font-weight-regular pay-main-color">SPX</text>
					<pay-item style="margin-top: 12px;" :payStatus="0"></pay-item>
				</view>
				<view class="pay-btn flex-row-center" @click="pay">
					支付
				</view>
			</view>
		</uv-popup>
		<toast ref="toast"></toast>
	</view>
</template>

<script>
	import payItem from "./pay-item.vue"
	import {
		getUserCenter,
		projectPay
	} from "../../api";
	export default {
		name: "pay",
		emits: ['pay'],
		components: {
			payItem
		},
		data() {
			return {
				projectId: 0, // 项目 ID
				USDT: '0.1', // 第一期金额
				USDT_MARGIN: '1', // 保证金额
				SPX: '10', // SPX 金额

				// 外面传进来的支付参数
				payParams: {
					projectId: 0, // 项目 ID
					USDT: '0', // 第一期金额
					USDT_MARGIN: '0', // 保证金额
					SPX: '0', // SPX 金额
				},
				// 弹框上面用来显示的总USDT
				sumUSDT: '0.00',
				// 主网
				spxContractAddr: '0x212fACFf93f0830Ed39229fa55615173C3AC98C5', // spx 合约地址
				usdtContractAddr: '0x55d398326f99059fF775485246999027B3197955', // usdt 代币地址
				abi: [
					// erc 20
					'function name() public view returns (string memory)', //  name
					'function symbol() public view returns (string memory)', // 代币
					'function decimals() external view returns (uint8)', // 单位
					'function initialSupply() external view returns (uint256)', // 初始发行量
					'function totalSupply() external view returns (uint256)', // 总供给
					'function balanceOf(address account) external view returns (uint256)', // 获取余额
					'event Transfer(address indexed from, address indexed to, uint256 value)', // 转账事件
					'function approve(address spender, uint256 amount) public returns (bool)', // 授权
					// 合约
					'function liquidityMint() public returns (bool)', // LP提取
					'function getLpClaim(address account) public view returns (uint256)', // 查询 LP 可提取余额
					'function buyNFTCard(uint256 amountRora, uint256 amountUsd, uint256 random) public returns (bool)', // 购买
					// spx 相关 1, 铸造获取身份 2, 发布任务 3, 确认支付
					'function mintNft(uint256 mint) public returns (bool)',
					'function publish(address nomad, uint256 amount, uint256 stage, uint256 random) public returns (bool)',
					'function dislodge(uint256 random, address nomad) public returns (bool)',
				],
			};
		},
		methods: {
			async pay() {
        uni.showLoading({
          title: '支付中,请等待...',
          mask:true
        })
				try {
					let usdtAmount = this.payParams.USDT
					let marginAmount = this.payParams.USDT_MARGIN
					let spxAmount = this.payParams.USDT

					let now = new Date().getTime() // 1669514448542
					await this.approveUsdt(usdtAmount);
					await this.publish_("0x0000000000000000000000000000000000000000", usdtAmount, 1, now);
					await this.projectPay_(now);
				} catch (error) {
					this.$refs.toast.show({
						msg: '支付失败!'
					})
				}
        setTimeout(function() {
          uni.hideLoading()
        }, 50)
			},

			// Usdt 转账
			async transferUsdt(to, amountUsdt) {
				const amountUsdtWei = this.$web3.utils.parseEther(amountUsdt.toString());
				const tc = await this.$web3.getSingerContract(this.usdtContractAddr, this.abi);
				return await tc.transfer(to, amountUsdtWei);
			},

			// 发布任务合约支付
			async publish_(nomad, amount, stage, random) {
				const amountUsdWei = this.$web3.utils.parseEther(amount.toString());
				const tc = await this.$web3.getSingerContract(this.spxContractAddr, this.abi);
				return await tc.publish(nomad, amountUsdWei, stage, random);
			},

			// 授权 Usdt
			async approveUsdt(amountUsd) {
				const amountUsdWei = this.$web3.utils.parseEther(amountUsd.toString());
				const usdtTc = await this.$web3.getSingerContract(this.usdtContractAddr, this.abi);
				const tr = await usdtTc.approve(this.spxContractAddr, amountUsdWei);
				await tr.wait();
			},

			async projectPay_(payRandom) {
				let params = {
					projectId: this.payParams.projectId,
					payRandom: payRandom
				}
				console.error("projectId: " + params.projectId + " payRandom: " + payRandom)
				await projectPay(params).then((data) => {
					this.$refs.popup.close()
					this.$refs.toast.show({
						msg: '发布成功!',
						isSuccees: true
					})
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/index/index'
						})
					}, 2500);

				}).catch((res) => {})
			},

			open(data) {
				this.sumUSDT = (parseFloat(data.USDT) + parseFloat(data.USDT_MARGIN)).toFixed(2)
				this.payParams = data
				this.$refs.popup.open()
			}
		}
	}
</script>

<style>
	.pay-btn {
		width: 100%;
		height: 44px;
		background: #EB7520;
		box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
		border-radius: 22px;
		opacity: 1;
		font-size: 16px;
		font-weight: 400;
		color: #FFFFFF;
		margin-top: 32px;
	}

	.pay {
		margin: 20px 16px;
		background-color: white;
	}

	.pay-main-color {
		color: #313C56;
	}

	.pay-text {
		color: #6B7885;
		font-size: 14px;
		font-weight: 400;
		margin-bottom: 4px;
	}

	.pay-text_medium {
		color: #313C56;
		font-size: 24px;
		font-weight: 500;
	}
</style>